<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="" href="/public/img/Vipe.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vipe初始化后台管理系统</title>
</head>
<style>
  *{
    user-select:none;
  }
  #body {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    list-style: none !important;
    user-select: none;
  }
  #showemoji{
    position: relative;
    transition: all 1s;
    top: 0;
    user-select: none;
  }
  #emoji {
    transition: all 1s;
    top: 10px;
    left: -5px;
    position: absolute;
    user-select: none;
    z-index: 10000000 !important;
  }
</style>

<body id="body">
  <!-- Emoji写入 -->
  <p id="emoji"></p>
  <!--渲染视图层-->
  <div id="app"></div>

  <script type="module" src="/src/main.ts"></script>
</body>
</html>
<script>
  var body = document.getElementById("body")
  var write_emoji = document.getElementById("emoji")
  window.onload = function () {
    body.addEventListener("mousedown", ({ x, y }) => {
      getRandEmoji(x,y)
    })
  }
  /**
    *获取随机Emoji
    */
  function getRandEmoji(x,y) {
    //定义表情包集合
    let Emoji = ["&#8986","&#8987","&#9800","&#9801","&#9802","&#9803","&#9804","&#9805","&#9806","&#9807","&#9808"
    ,"&#9809","&#9810","&#9811","&#9823","&#9855","&#9875","&#9889","&#9898","&#9899",
    "&#9917","&#11088","&#11093","&#127514",
    "&#127535","&#127538","&#127539","&#127540",
    "&#128507;", "&#128508;", "&#128509;", "&#128510;", "&#128511;", "&#128512;", "&#128513;", "&#128514;", "&#128515;", "&#128516;", "&#128517;"];
    let emoji = Math.floor(Math.random() * Emoji.length)
    write_emoji.innerHTML = '<span id="showemoji">'+Emoji[emoji]+'</span>'
    var showemoji = document.getElementById("showemoji")
    showemoji.style.left = x +"px"
    showemoji.style.top = y +"px"
    setTimeout(()=>{
      showemoji.style.zIndex = "-1"
      write_emoji.style.zIndex = "1"
      showemoji.style.top = y - 80 +"px"
      setTimeout(()=>{
        showemoji.style.opacity = "0"
      },200)
    },40)
  }


</script>